
<template>
  <div>
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft"></van-nav-bar>

    <!-- 信息区域 -->

    <div class="content">
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
        <ul class="ul">
          <li>
            <label>
              拍照
              <input type="file" accept="image/*" capture="camera" @change="paishe($event)" />
            </label>
          </li>
          <li>
            <label>
              从手机相册中选择
              <input type="file" accept="image/*" capture="camera" @change="paishe($event)" />
            </label>
          </li>
          <li v-on:click="out">取消</li>
        </ul>
      </van-popup>
      <ul>
        <li v-on:click="foher">
          <p>头像</p>

          <div>
            <img :src="img" alt />
            <p>></p>
          </div>
        </li>

        <li>
          <p>昵称</p>

          <div>
             <span style="font-size:14px;">{{info.nickname}}</span>
            <p>></p>
          </div>
        </li>
        <li>
          <p>手机号</p>

          <div>
            <span style="font-size:14px;">{{info.mobile}}</span>
            <p>></p>
          </div>
        </li>
        <li>
          <p>性别</p>

          <div>
            <span style="font-size:14px;">{{info.sex | sexFilters}}</span>
            <p>></p>
          </div>
        </li>
        <li>
          <p>出生日期</p>

          <div>
           <span style="font-size:14px;">{{info.birthday}}</span>
            <p>></p>
          </div>
        </li>
        <li v-on:click="SanChange">
          <p>所在城市</p>
        
          <div>
            <span style="font-size:14px;">
                {{info.province_name}},{{info.city_name}},{{info.district_name}}
            </span>
            <p>></p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 三级联动弹出 -->
    <van-popup v-model="Sanshow" position="bottom" :style="{ height: '60%' }" >
       <van-area :area-list="areaList" @cancel="cancel" @change="changeItem" @confirm="confirm" />
    </van-popup>
  </div>
</template>

<script>

//引入三级联动vant组件
import Vue from 'vue';
import { Area } from 'vant';
Vue.use(Area);
import { info, img, getimg, getCity } from "../../http/api";
export default {
  data() {
    return {
      info: "",
      show: false, //头像弹出层
      img: "",    
      Sanshow: false,//弹出层 开关   
       addInp :false, //三级联动开关
      //三级联动数据源
      areaList:{
          province_list: {
          
          },
          city_list: {
          
          },
          county_list: {
          
          }
      }                                                 
    };
  },
  components: {  },
  mounted() {
    
  },
  created() {
    //获取数据源
    let token = localStorage.getItem("token");
    info(token).then(res => {
      // console.log(res);
      this.info = res.data.data;
      this.img = info.avatar;
    });
   
    //获取省市区的数据
    getCity("0").then(res=>{
      console.log(res);
      //获取三级联动（省的数据）
      var result = {} //创建一个新对象
      //循环请求回来的数组，将数组的每一项的id 作业key，将数组的每一项area_name当成value
      res.data.data.forEach((item)=>{
         result[item.id] = item.area_name
      })
      //省数据结构赋值
      this.areaList.province_list = result;
    }) 
  },

  filters:{
    //过滤性别
      sexFilters(val){
          if(val == 0){
            return "男"
          }else if(val == 1){
            return "女"
          }else{
              return "保密"
          }
      }
  },
  watch: {},
  computed: {},
  methods: {
    //点击回退
    onClickLeft() {
      this.$router.go(-1);
    },

    //获取头像
    foher() {
      this.show = !this.show;
    },
    out() {
      this.show = !this.show;
    },
    //上传头像
    paishe(e) {
      let formData = new FormData();
      this.show = false;
      formData.append("file", e.target.files[0]);
      //获取地址的接口
      img(formData).then(res => {
        console.log(res.data.data.path);

        if (res.data.code === 200) {
          //  更新新头像
          getimg({ avatar: res.data.data.path }).then(res => {
            this.img = res.data.data.avatar;
          });
        }
      });
    },
    //三级联动弹出层  初始化城市数据获取，以及渲染
  SanChange(){
    this.Sanshow = true;  
     this.addInp = true; //第二种方法三级联动
    this.initCity(); //初始化城市方法
  },
  //选择城市的取消按钮
  cancel(){
     this.Sanshow = false;
  },
  //result三级联动方法 方便调用
  resultFn(arr){
    let obj ={}
    arr.forEach((item)=>{
      obj[item.id]= item.area_name
    })
    return obj
  },
  getInfo(){
 
  },
  //调用三级联动初始化方法
    initCity(){
      getCity("0").then(res=>{
       //省数据结构赋值
        this.areaList.province_list = this.resultFn(res.data.data);

        return getCity(res.data.data[0].id)
      }).then((res)=>{
      
       //市数据结构赋值
        this.areaList.city_list = this.resultFn(res.data.data);

        return getCity(res.data.data[0].id)
      }).then((res)=>{
       
       //区数据结构赋值
        this.areaList.county_list = this.resultFn(res.data.data);
      })
     
    },
    //城市三级联动 发生改变时，触发的事件
    changeItem(picker,data,index){
      // console.log(index);
      // console.log("改变了");
      switch(index){
        case 0: 
        //做省切换的逻辑
        // console.log(data[0].code)
        //当用户改变了省 做出切换
        getCity(data[0].code).then((res=>{
          // console.log(res);
            var result = {} //创建一个空对象
            res.data.data.forEach((item)=>{
            result[item.id] = item.area_name
          })
          //市数据结构赋值
          this.areaList.city_list = result;
          //获取区的数据
          return getCity(res.data.data[0].id).then(res=>{
            // console.log(res);
            var result = {} //创建一个空对象
            res.data.data.forEach((item)=>{
                result[item.id] = item.area_name
            })
             this.areaList.county_list = result;
          })
        }))
        break
        
        case 1:
          //做市切换到区的逻辑
          //  console.log(data);
           getCity(data[1].code).then(res=>{
             console.log(res);
              var result = {} //创建一个空对象
              res.data.data.forEach((item)=>{
                result[item.id] = item.area_name
            })
              this.areaList.county_list = result;
           })
        break 
        
        case 2:
          //做区切换的逻辑
        return 
      }
    },
    //三级联动 确定 触发的事件
    confirm(e){
        console.log(e);
        getimg({
          city_id:e[1].code,  //区
          districe_id:e[2].code, //市
          province_id:e[0].code, //省
        }).then(res=>{
          console.log(res);
          if(res.data.code === 200){
            //关闭弹框
             this.Sanshow = false; 
             this.getInfo()
          }
        })
    },

    // 省市区三级联动
    selected(data){
      this.addInp = false;
      this.city = data.province.value + ' ' + data.city.value +' ' + data.area.value
        this.Sanshow = false;  
    }
},

};
</script>

<style lang="scss" scoped>
.ul {
  > li {
    height: 100px;
    width: 100%;
    text-align: center;
    line-height: 100px;
    > label {
      display: block;
      height: 100px;
      width: 100%;
      text-align: center;
      line-height: 100px;
      > input {
        display: none;
      }
    }
  }
}
.van-nav-bar__title {
  font-size: 35px;
  color: #aaa;
}
.van-icon-arrow-left::before {
  font-size: 40px;
  color: #aaa;
}
.van-icon-search::before {
  font-size: 52px;
}
.van-nav-bar,
.van-action-sheet__cancel,
.van-action-sheet__item {
  height: 85px;
}
.van-popup--bottom.van-popup--round {
  border-radius: 0;
}
// 内容区域
.content {
  padding-top: 22px;
  background-color: #f0f2f5;
  > ul {
    background-color: #fff;
    display: flex;

    justify-content: center;
    align-items: center;
    flex-direction: column;
    > li {
      background-color: #fff;
      width: 706px;
      height: 120px;
      border-bottom: 4px solid #fafafa;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > p {
        font-size: 22px;
      }
      > div {
        display: flex;
        align-items: center;
        > img {
          width: 73px;
          height: 73px;
          border-radius: 100%;
        }
        > p {
          margin-left: 37px;
        }
      }
    }
  }
}
</style>
